<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <Category :isShowList="isShowList" @changeCategory="changeCategory"></Category>
    </el-card>
    <el-card>
      <SkuForm ref="sku" v-show="isShowSkuForm" :visible.sync="isShowSkuForm"></SkuForm>
      <SpuForm ref="spu" v-show="isShowSpuForm" :visible.sync="isShowSpuForm" @backSuccess="backSuccess"
               @backCancel="backCancel"></SpuForm>
      <div v-show="!isShowSkuForm&&!isShowSpuForm">
        <el-button type="primary" @click="addSpu" :disabled="!category3Id">+添加SPU</el-button>
        <el-table
          :data="spuList"
          style="width: 100%" border>
          <el-table-column
            prop="prop"
            align="center"
            type="index"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="spuName"
            label="SPU名称"
            width="width">
          </el-table-column>
          <el-table-column
            prop="description"
            label="SPU描述"
            width="width">
          </el-table-column>
          <el-table-column
            prop="prop"
            label="操作"
            width="width">
            <template slot-scope="{row,$index}">
              <HintButton type="success" size="mini" icon="el-icon-plus" title="sku添加" @click="addSku(row)"></HintButton>
              <HintButton type="warning" size="mini" icon="el-icon-edit" title="spu修改"
                          @click="updateSpu(row)"></HintButton>
              <HintButton type="info" size="mini" icon="el-icon-info" title="查看spu下的sku列表"></HintButton>
              <HintButton type="danger" size="mini" icon="el-icon-delete" title="spu删除"
                          @click="deleteSpu(row)"></HintButton>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          style="text-align: center"
          @current-change="getPageSpuInfo"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="limit"
          :total="total"
          :pager-count="7"
          :page-sizes="[3, 5, 10]"
          layout="prev, pager, next, jumper,->,sizes,total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>

import SpuForm from './SpuForm'
import SkuForm from './SkuForm'

export default {
  name: "Spu",
  components: {
    SpuForm,
    SkuForm
  },
  data() {
    return {
      isShowList: true,//这个值是用来操作三级联动的 它没有控制页面的显示
      category1Id: "",
      category2Id: "",
      category3Id: "",
      page: 1,
      limit: 3,
      total: 0,
      spuList: [],
      isShowSpuForm: false,//为了搭页面的需要可以改成true 默认是false
      isShowSkuForm: true
    }
  },
  methods: {
    //三级联动
    changeCategory({categoryId, level}) {
      if (level === 1) {
        //清除2 3级分类及spuList
        this.category2Id = "",
          this.category3Id = "",
          this.spuList = [],
          this.category1Id = categoryId
      } else if (level === 2) {
        this.category3Id = "",
          this.spuList = [],
          this.category2Id = categoryId
      } else {
        this.category3Id = categoryId
        this.getPageSpuInfo()//点击三级联动的时候获取spuList
      }
    },
    //分页器
    handleSizeChange(size) {
      this.limit = size
      this.getPageSpuInfo()
    },
    //获取spu分页信息
    async getPageSpuInfo(pager = 1) {
      this.page = pager
      let {page, limit, category3Id} = this
      try {
        const result = await this.$API.spu.getPageSpuInfo(page, limit, category3Id)
        if (result.code === 200 || result.code === 20000) {
          this.spuList = result.data.records
          //console.log("888888",result.data)
          //console.log(this.spuList)
          this.total = result.data.total
        } else {
          this.$message.error('获取spu数据失败')
        }
      } catch (error) {
        this.$message.error('获取spu请求失败')
      }
    },
    //点击添加Spu切换到spu添加页面
    addSpu() {
      this.isShowSpuForm = true
      this.$refs.spu.getInitAddSpuFormData(this.category3Id)
    },
    // 点击修改spu切换到spu修改页面
    updateSpu(row) {
      this.isShowSpuForm = true
      this.flag = row.id
      this.$refs.spu.getInitUpdateSpuFormData(row, this.category3Id)
    },
    //告诉父组件 回来了
    backSuccess() {
      if (this.flag) {
        //如果有flag 说明是从修改页面回来的
        this.getPageSpuInfo(this.page)
      } else {
        //如果没有flag 说明是从添加页面过来的
        this.getPageSpuInfo()
      }
      this.flag = null
    },
    //子组件点击取消按钮回到父组件
    backCancel() {
      this.flag = null
    },
    //点击删除按钮 删除该行 需要发请求 重新渲染页面
    async deleteSpu(row) {
      try {
        const result = await this.$API.spu.delete(row.id)
        if (result.code === 200 || result.code === 20000) {
          this.$message.success('删除spu成功')
          await this.getPageSpuInfo(this.spuList.length > 1 ? this.page : this.page - 1)
        }else {
          this.$message.error('删除spu失败')
        }
      } catch (error) {
        this.$message.error('删除spu请求失败')
      }
    },
    //点击添加sku按钮
    addSku(row){
      this.$refs.sku.getAttrInfoList(row,this.category1Id,this.category2Id,this.category3Id)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
